<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-list>
      <t-expansion-item
        popup
        default-opened
        icon="mail"
        label="Inbox"
        caption="5 unread emails"
      >
        <t-separator />
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
      <t-expansion-item popup icon="send" label="Outbox" caption="Empty">
        <t-separator />
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
      <t-expansion-item
        popup
        icon="drafts"
        label="Draft"
        caption="Draft a new email"
      >
        <t-separator />
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
    </t-list>
  </div>
</template>
